export const ProgressBar = () => {
    return {
      "App.vue":`
     

     

      <template>
      <div
        class="content"
      >
      <ProgressBarCard :data="data" />
      </div>
    </template>
    
    <script setup>
    import { ref, reactive, nextTick, onMounted, watch } from "vue";
    import ProgressBarCard from "./ProgressBarCard.vue";
        const data = [
      {
        name: "第一步",
        active: true,
        time: "12:00:00",
        date: "2021-01-01 ",
      },
      {
        name: "第二步",
        active: true,
        time: "12:00:00",
        date: "2021-01-01 ",
      },
   
    ];
    
    onMounted(() => {
    });
    </script>
    
    <style scoped >
    .content{
      width: 100%;
      background:#042C67;
      padding-top:300px;
      height: 492px; display: flex;justify-content: center;
    }
    </style>
    
    
      
      
    
    
      
      
    
    
      `,
      "src/ProgressBarCard.vue":`

      <template>
      <div
        class="stepsCard "
        :style="{
          width: stepsWidth + 'px',
        }"
      >
        <template v-for="(item, index) in props.data" :key="index">
          <div :class="['defaultStep']">
       
            <div class="stepTop" >
              <div>
                {{ item.date }}
              </div>
              <div>
                {{ item.time }}
              </div>
            </div>
            <div class="title">
              {{ item.name }}
            </div>
          </div>
        </template>
             <div
              class="active"
              v-if="resultWidth"
              :style="{ 
                
                width: resultWidth*stepsWidth + 'px' }"
            ></div>
        <div
          class="stepsActiveBox"
       
        >
        {{resultWidth}}
        </div>
      </div>
    </template>
    
    <script setup>
    import {
      ref,
      reactive,
      defineEmits,
      onMounted,
      onUpdated,
      computed,
      watch,
    } from "vue";
    const props = defineProps({
      data: {
        type: Array,
        default: () => [],
      },
      stepsWidth: {
        type: Number,
        default: 500,
      },
    });
    
    /*
        基本数据类型
        引用数据类型（复杂类型） 个人建议 ref初始化变量 
        ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
        ref定义的数据访问的时候要多一个.value
        */
    const stepsWidth = computed(() => {
      return props.stepsWidth;
    });
    // JavaScript Date utility functions
    
    // 计算两个日期之间的天数（不包含小时分钟秒）
    function countDaysBetween(date1, date2) {
      const startDate = new Date(date1);
      const endDate = new Date(date2);
      return Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24));
    }
    
    // 获取当前日期
    function getCurrentDate() {
      return new Date();
    }
    
    // 主要函数：计算当前时间距离结束时间的天数，以及开始和结束时间总共有多少天
    function calculateDaysBetweenDates(startDateStr, endDateStr, currentDate = null) {
      if (!currentDate) {
        currentDate = getCurrentDate();
      }
      
      const startDate = new Date(startDateStr);
      const endDate = new Date(endDateStr);
      const daysToEndDate = countDaysBetween(currentDate, endDate);
      const totalDays = countDaysBetween(startDate, endDate);
    
      return {
        daysToEndDate: daysToEndDate,
        totalDays: totalDays,
      };
    }
    
    // 使用示例
    const resultDay = computed(() => {
      if(props.data.length >= 2){
          const startDateString = props.data[0].date;
    const endDateString = props.data[1].date;
    return calculateDaysBetweenDates(startDateString, endDateString)
    }else{
      return {
        daysToEndDate: 0,
        totalDays: 0,
      }
    }
    
      
    });
    const resultWidth = computed(() => {
     
    if(props.data.length >= 2){
        
    const {totalDays,daysToEndDate} = resultDay.value;
    //计算 开始时间到当前时间过去多少天
    console.log(daysToEndDate,totalDays, (1 - (daysToEndDate / totalDays)) );
    return daysToEndDate<0?1:  (1 - (daysToEndDate / totalDays)) 
    }else{
      return false
    }
      
    });
     
    
    </script>
    
    <style scoped>
    .stepsCard {
      width: 100%;
      height: 12px;
      background: rgba(59, 130, 253, 0.2);
      position: relative;
      align-items: center;
      justify-content: space-between;
      display: flex;
    }
    .stepTop {
      position: absolute;
      white-space: nowrap;
      top: -60px;
      text-align: center;
      left: 0;
      transform: translateX(-50%);
      font-size: 12px;
      font-weight: 500;
      font-size: 14px;
      color: #d3e4fe;
    }
    .stepsCard:before {
      content: "";
      position: absolute;
      width: 26px;
      height: 26px;
      background: rgba(59, 130, 253, 1);
      border-radius: 50%;
      bottom: -9px;
      left: -14px;
    
      z-index: 2;
    }
    
    .defaultStep {
      position: relative;
      height: 12px;
      background: transparent;
    }
    .defaultStep::before {
      content: "";
      position: absolute;
      width: 26px;
      height: 26px;
      background: #0d377e;
      border-radius: 50%;
      bottom: -8px;
      right: -12px;
    }
    .active {
      width: 100%;
      height: 12px;
      position: absolute;
      background: rgba(59, 130, 253, 1);
    }
    
    .title {
      position: absolute;
      white-space: nowrap;
      bottom: -40px;
      left: 0;
      transform: translateX(-50%);
      font-size: 12px;
      font-weight: 500;
      font-size: 14px;
      color: #d3e4fe;
    }

    .stepsActiveBox {
      position: absolute;
      bottom: -8px;
      right: -12px;
      width: 26px;
      height: 26px;
      background: rgba(59, 130, 253, 1);
      border-radius: 50%;
    }
    </style>
    
      
      `
    }
   
  };
  